<template>
  <div>
  <el-form :model="queryForm">
    <el-form-item  label="查询日期" style="margin-top: 3%;margin-left: 3%">
      <el-col :span="5">
        <el-date-picker type="date" placeholder="选择日期" v-model="queryForm.startDate" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col class="line" :span="0.5">至</el-col>
      <el-col :span="5">
          <el-date-picker type="date" placeholder="选择日期" v-model="queryForm.endDate" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-button type="primary" style="margin-left: 70%;" @click="getList">查询</el-button>
    </el-form-item>
  </el-form>

  <el-tabs type="border-card" v-model="activeName"  style="width: 90%;margin-left: 3%" @tab-click="handleClick" >
    <el-tab-pane label="收入明细" name="first">
      <span style="font-size: 20px;">金额总计：{{sum}}</span>
      <p>
        <span>押金(总计)：{{deposit}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>租金(总计)：{{rent}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>电费(总计)：{{electricityFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>水费(总计)：{{waterFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>宽带(总计)：{{netFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>燃气费(总计)：{{gasFee}} {{"\u3000"}} {{"\u3000"}}</span><br>
        <span>有线电视(总计)：{{cableFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>其他(总计)：{{otherFee}}  {{"\u3000"}} </span>
      </p>
      <el-table
        :data="insertData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="dealDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="total"
          label="总计（元）">
        </el-table-column>
        <el-table-column
          prop="deposit"
          :formatter="formatNumber"
          label="押金（元）">
        </el-table-column>
        <el-table-column
          prop="rent"
          label="租金（元）">
        </el-table-column>
        <el-table-column
          prop="electricityFee"
          label="电费（元）">
        </el-table-column>
        <el-table-column
          prop="waterFee"
          label="水费（元）">
        </el-table-column>
        <el-table-column
          prop="netFee"
          label="宽带（元）">
        </el-table-column>
        <el-table-column
          prop="gasFee"
          label="燃气费（元）">
        </el-table-column>
        <el-table-column
          prop="cableFee"
          label="有线电视费（元）"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="otherFee"
          label="其他（元）"
          width="100px">
        </el-table-column>
        <el-table-column
          label="操作">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNo"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>
    <!--支出-->
    <el-tab-pane label="支出明细" name="second" @click="getOutFee">
      <span style="font-size: 20px">金额总计：{{sum}}</span>
      <p>
        <span>押金(总计)：{{deposit}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>租金(总计)：{{rent}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>电费(总计)：{{electricityFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>水费(总计)：{{waterFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>宽带(总计)：{{netFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>燃气费(总计)：{{gasFee}} {{"\u3000"}} {{"\u3000"}}</span><br>
        <span>有线电视(总计)：{{cableFee}} {{"\u3000"}} {{"\u3000"}}</span>
        <span>其他(总计)：{{otherFee}}  {{"\u3000"}} </span>
      </p>
      <el-table
        :data="insertData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="dealDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="total"
          label="总计（元）">
        </el-table-column>
        <el-table-column
          prop="deposit"
          label="押金（元）">
        </el-table-column>
        <el-table-column
          prop="rent"
          label="租金（元）">
        </el-table-column>
        <el-table-column
          prop="electricityFee"
          label="电费（元）">
        </el-table-column>
        <el-table-column
          prop="waterFee"
          label="水费（元）">
        </el-table-column>
        <el-table-column
          prop="netFee"
          label="宽带（元）">
        </el-table-column>
        <el-table-column
          prop="gasFee"
          label="燃气费（元）">
        </el-table-column>
        <el-table-column
          prop="cableFee"
          label="有线电视费（元）"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="otherFee"
          label="其他（元）"
          width="100px">
        </el-table-column>
        <el-table-column
          label="操作">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNo"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
  import {searchCW,getFee,getOutFee } from "@/api/yingye/yingye";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    export default {
        name: "index",
      data(){
          return{
            activeName: 'first',
            queryForm: {
              startDate: '',
              endDate: '',
              pageNo:1,
              pageSize:10,
            },
            feeForm: {
              startDate: '',
              endDate: '',
            },
            total:0,
            deposit:0,
            rent:0,
            electricityFee:0,
            waterFee:0,
            netFee:0,
            gasFee:0,
            cableFee:0,
            otherFee:0,
            insertData:[],
            outData:[],
            insertCount:[],
            outCount:[],
          }
      },
      created() {
        this.getList();
        /*this.getFee();*/
      },
      methods:{
        handleClick(tab, event) {
          console.log(tab, event);
          if(tab.name == 'second'){
            // 触发‘配置管理’事件
            this.getOutFee();
          }else{
            // 触发‘用户管理’事件
            this.getAllFee();
          }
        },
        formatNumber(row){

        },
        getList(){
          searchCW(this.queryForm).then(res=>{
            this.total = res.data.total
            this.insertData = res.data.list

          })
          this.getAllFee()

        },
        getAllFee(){
          this.feeForm.startDate=this.queryForm.startDate
          this.feeForm.endDate=this.queryForm.endDate
          getFee(this.feeForm).then(res=>{
            if (res.data!=undefined){
              this.sum=res.data.total
              this.deposit=res.data.deposit
              this.rent=res.data.rent
              this.electricityFee=res.data.electricityFee
              this.waterFee=res.data.waterFee
              this.netFee=res.data.netFee
              this.gasFee=res.data.gasFee
              this.cableFee=res.data.cableFee
              this.otherFee=res.data.otherFee
            }else{
              console.log(res.data)
              this.sum=0
              this.deposit=0
              this.rent=0
              this.electricityFee=0
              this.waterFee=0
              this.netFee=0
              this.gasFee=0
              this.cableFee=0
              this.otherFee=0
            }
          })
        },
        getOutFee(){
          this.feeForm.startDate=this.queryForm.startDate
          this.feeForm.endDate=this.queryForm.endDate
          getOutFee(this.feeForm).then(res=>{
            if (res.data!=undefined){
              this.sum=res.data.total
              this.deposit=res.data.deposit
              this.rent=res.data.rent
              this.electricityFee=res.data.electricityFee
              this.waterFee=res.data.waterFee
              this.netFee=res.data.netFee
              this.gasFee=res.data.gasFee
              this.cableFee=res.data.cableFee
              this.otherFee=res.data.otherFee
            }else{
              console.log(res.data)
              this.sum=0
              this.deposit=0
              this.rent=0
              this.electricityFee=0
              this.waterFee=0
              this.netFee=0
              this.gasFee=0
              this.cableFee=0
              this.otherFee=0
            }
          })
        },
      }
    }
</script>

<style scoped>
span{

}
</style>
